<!-- 弹出选择客户组件 -->
<template name='print_select'>
	<view>
		<uni-popup ref="printSelect" type="center" title="打印操作" minHeight="auto" minWidth="auto">
			<view class="bib" >
				
				<!-- <view class="misk-my" v-if="showMisk==true" @click="showMisk=false"></view> -->
				<view class="print-box" >
					<view class="ciq">
						<!-- 搜索 -->
						<view class="cic" >
							<view class="floatleft flex">
							
								<view class="riskTitle">
									打印方式:
								</view>
							
								
								<view class="input_confirms" style="margin-left: 0px;width: 150px;">
									<uni-data-select
									:localdata="print_type.list"
									v-model="print_type.now_id"
									@change="funPrint_type"
									placeholder="选择打印方式"
									placeholder-class="placeholder-class"
									></uni-data-select>
									
								</view>
							
							</view>
							
							<view class="floatleft flex" v-if="print_type.now_id!=1">
								<view class="riskTitle">
									内容模板:
								</view>
								<view class="input_confirms" style="margin-left: 0px;width: 150px;">
									<uni-data-select
									:disabled="print_type.now_id==1"
									:localdata="print_mode.list"
									v-model="print_mode.now_id"
									@change="funPrint_mode"
									placeholder="选择内容模板"
									placeholder-class="placeholder-class"
									></uni-data-select>
								</view>
							</view>
							
						</view>
						
						<!-- 打印纸 -->
						<view class="cic" v-if="Papers.list.length>0 && print_type.now_id!=1">
							<view class="floatleft flex">
								<view class="riskTitle ">
									打印设备:
								</view>
								<view class="input_confirms" style="margin-left: 0px;width: 150px;">
									<picker 
									@change="PrintersModeChange"
									:value="Printer.index" 
									range-key="text"
									class="justify h100"
									:range="Printer.list">
										<view class="uni-input">{{Printer.list[Printer.index].text }}</view>
									</picker>
								</view>
							</view>
							<view class="floatleft flex">
								<view class="riskTitle ">
									打印纸张:
								</view>
								<view class="input_confirms" style="margin-left: 0px;width: 150px;">
									<picker 
									@change="gradeChange"
									:value="Papers.index" 
									range-key="text"
									class="justify h100"
									:range="Papers.list">
										<view class="uni-input">{{Papers.list[Papers.index].text }}</view>
									</picker>
								</view>
							</view>
							
							
						</view>
						<view class="cic" v-if="Papers.list.length>0 && print_type.now_id!=1">
							<!-- 自定义宽高 -->
							
								
								<view class="floatleft flex" v-if="Papers.pagesCreateShow">
									<view class="riskTitle ">
										纸张宽度:
									</view>
									<input type="number" size="5"
									class="input_confirms" style="margin-left: 0px;width: 150px;"
									placeholder-class="placeholder-class"
									v-model="Papers.width"
									placeholder="单位/mm"
									@input="inputElement('width')" 
									@confirm="inputElement('width')">
								
								</view>
								<view class="floatleft flex" v-if="Papers.pagesCreateShow">
									<view class="riskTitle ">
										纸张高度:
									</view>
									<input type="number" size="4"
									placeholder="单位/mm"
									class="input_confirms" style="margin-left: 0px;width: 150px;"
									placeholder-class="placeholder-class"
									v-model="Papers.height"
									@input="inputElement('height')" 
									@confirm="inputElement('height')">
								</view>
							
						</view>
						
						<view class="cic" v-if="Papers.list.length>0 && print_type.now_id!=1">
							<view class="floatleft flex">
								<view class="riskTitle ">
									纸张方向:
								</view>
								<view class="input_confirms" style="margin-left: 0px;width: 150px;">
									<picker
									@change="intOrientChange"
									:value="intOrient.index" 
									range-key="text"
									class="justify h100"
									:range="intOrient.list">
										<view class="uni-input">{{intOrient.list[intOrient.index] }}</view>
									</picker>
								</view>
							</view>
						</view>
						<!-- end -->
						<view class="flex tipscom">
							<checkbox-group @change="checkboxChange">
								<checkbox value="cb" :checked="print_voice_checked"  />
							</checkbox-group>
							
							<view class="alter justify" @click="onclickMsg">打印的时候进行语音播报（勾选则播报语音，否则反之）</view>
						</view>
						<view class="tipscom" >
							云打印：所有单据将通过连接打印机的电脑进行打印
						</view>
						<view class="tipscom" >
							本地打印：单据通过当前电脑进行选择打印机后进行打印
						</view>
						
						
						<view class="flex" style="height: 80px;">
							<button @click="$common.noMultipleClicks('sendPrint',sendPrint,true)"
							class="bu" 
							>
								直接打印
							</button>
							
							
							<button @click="$common.noMultipleClicks('sendPrint',sendPrint,false)" 
							class="bu"
							style="background-color: #0f66e0;"
							v-if="print_type.now_id!=1"
							>
								预览打印
							</button>
						</view>
					</view>
				</view>
			
			</view>
		</uni-popup>
		<print_jcp ref="print_Oneform" v-show="false"></print_jcp>
	</view>
</template>

<script>
	import print_jcp from "@/components/print_jcp/print_jcp.vue"
	var LODOP
	import {
		getLodop
	} from "utils/LodopFuncs.js"
	export default{
		name:'print_select',
		components:{
			print_jcp
		},
		data(){
			return{
				print_voice_checked:false,
				showMisk:false,
				
				intOrient:{
					list:['纵向打印(默认)','横向打印'],
					index:0,
				},
				print_type:{
					list:[
						{text:'云打印(默认)',value:'1'},
						{text:'本地打印',value:'2'},
					],
					now_id:'1'
				},
				print_mode:{
					list:[
						{text:'销售单模板(默认)',value:'1'},
						{text:'销售单模板-底部留底',value:'2'},
						{text:'进货单模板',value:'3'},
					],
					now_id:'1'
				},
				print_data:'',//传递进来的ID数组
				/**
				 * 打印
				*/
				Papers:{
					list:[],//当前打印机的打印纸数组
					index:-1,//选中的打印纸索引
					height: 1400,//自定义的打印纸高度 单位mm
					width: 2410,//自定义的打印纸宽度 单位mm
					pagesCreateShow:false,//自定义纸张是否可见
					name:''
				},
				/**
				 * 打印
				*/
				Printer:{
					list:[],
					index:-1,
				},
				
			} 
		},
		 // 此处定义传入的数据
	
		created() {
			var that = this
			//起动打印服务
			this.checkLodop(function(){
				that.getStorage();//获取缓存记忆
			})
			this.getStorageInput()
		},
		methods:{
			checkboxChange(res){
				
				var type = res.detail.value.length>0 ? 1:0
				this.print_voice_checked = res.detail.value.length>0 ? true:false
				uni.setStorage({
					key: 'print_sned_voice',
					data: type,
					success: function () {
					}
				});
			},
			onclickMsg(){
				this.$common.showModal('提示',this.$global.title.m46)
			},
			/**
			 * 判断当前LODOP是否就绪
			*/
			checkLodop(callFun){
				var that  = this
				var res = undefined;
				var TimerInit = setInterval(function() { //将计时器赋值给 TimerInit 
					res = getLodop();
					if (res.type==false) {
						
						if(res.clearInterval==true){
							clearInterval(TimerInit) 
						}
						
					} else {
						clearInterval(TimerInit) 
						LODOP = res.data
						callFun();
					}
				}, 100);
			},
					
			/**
			 * 获取缓存宽高的记忆
			*/
			getStorageInput(){
				var that = this
				uni.getStorage({
					key:'select_height',
					success: (res) => {
						that.Papers.height = res.data
					}
				})
				uni.getStorage({
					key:'select_width',
					success: (res) => {
						that.Papers.width = res.data
					}
				})
				
				uni.getStorage({
					key:'select_intOrientValueKeyName',
					success: (res) => {
						that.intOrient.index= res.data
					}
				})
				
				
				uni.getStorage({
					key:'print_sned_voice',
					success: (res) => {
						that.print_voice_checked = res.data == 1 ? true :false
					}
				})
			},
			//纸张方向设置的回调
			intOrientChange(e){
				this.intOrient.index = e.detail.value,
				uni.setStorage({
					key: 'select_intOrientValueKeyName',
					data: e.detail.value,
					success: function () {
					}
				});
			},
			
			/**
			 * 保存自定义纸张的宽高
			*/
			inputElement(type){
				if(type =='select_height'){
					var value = this.Papers.height
				}else{
					var value = this.Papers.width
				}
				uni.setStorage({
					key: type,
					data: value,
					success: function () {
					}
				});
			},
			
			/**
			 * 设置打印纸缓存
			*/
			gradeChange(e){
				this.Papers.index = e.detail.value
				this.Papers.name =  this.Papers.list[this.Papers.index].text
				this.checkPapers();
				
				uni.setStorage({
					key: 'select_Print_Papers',
					data: this.Papers,
					success: function () {
					}
				});
			},
			
			/**
			 * 设置打印机缓存
			*/
			PrintersModeChange(e){
				console.log(e.detail.value)
				this.Printer.index = e.detail.value
				uni.setStorage({
					key: 'select_PrintersValueKeyName',
					data: e.detail.value,
					success: function () {
					}
				});
			},
			
			/*
			* 检查是否选中的是自定义纸张，是的话就显示自定义宽高项
			*/
			checkPapers(){
				this.Papers.pagesCreateShow = this.Papers.index==0 ? true : false
			},
			
			
			/**
			 * 获取纸张、打印机都需要传递进去select的ID
			*/
			getStorage(){
				var that = this
				//上次记忆的打印机
				this.CreatePrinterList();//获取打印机
				var index = uni.getStorageSync('select_PrintersValueKeyName')//获取记忆
				//判断是否有记忆;有的话旧设置记忆的打印机
				if( index==''){
					this.Printer.index = 0 
				}else{
					this.Printer.index = index 
				}
		
		
				that.Papers.list = []
				that.Papers.list.push({ value: 'CreateCustomPage', text: "自定义纸张" })
				
				var strPageSizeList = LODOP.GET_PAGESIZES_LIST(that.Printer.index,"|");
				var Options = strPageSizeList.split("|"); 
				
				Options.forEach(function(item,i){
					that.Papers.list.push({ value: item, text: item})
				})
		
				
				//
				var Papers = uni.getStorageSync('select_Print_Papers')//获取记忆
				
				if(Papers.index){
					this.Papers.index = Papers.index
					this.Papers.name  = Papers.name
				}else{
					this.Papers.index = 0
				}
				this.checkPapers();

				var data = uni.getStorageSync('select_Print_mode')//获取记忆
				this.print_mode.now_id = data.length<=0 ? '1' : data
				
			},
			
			/**
			 * 获取打印机列表
			*/
			CreatePrinterList(){
				var iPrinterCount = LODOP.GET_PRINTER_COUNT();
				var option = {}
				for(var i=0;i<iPrinterCount;i++){
					option = {}
					option.value = i;
					option.text = LODOP.GET_PRINTER_NAME(i);
					this.Printer.list.push(option)
				};	
				this.Printer.index = 0
			},
				
			
			open(data,immediate=false) {
				this.print_data = data
				if(immediate == false){
					this.$refs.printSelect.open()
				}else{
					this.print_type.now_id = 1
					this.sendPrint(true)
				}
			},
			funPrint_mode(e){
				this.print_mode.now_id = e
				/* uni.setStorage({
					key: 'select_Print_mode',
					data: e,
					success: function () {
					}
				}); */
			},
			funPrint_type(e){
				this.print_type.now_id = e
			},
			sendPrint(PREVIEW){
				var that = this
				if(that.print_type.now_id == 2){
					var jsonData = JSON.parse(that.print_data)
					if(jsonData.length<1){
						that.$common.showModal('错误 ',"未选择单据！")
						return;
					}
					if(jsonData.length>1){
						
						that.$common.showModal('错误 ',"本地打印不能进行多选单据进行操作！")
						return;
					}
					var order_id = jsonData[0]
					that.$common.get_request(
						{
							type:'order_print_list',
							order_id:order_id,
							print_type:that.print_type.now_id,
							print_mode:that.print_mode.now_id,
						},
						(res)=>{
							 
							that.$refs.print_Oneform.Prnt_Oneform(PREVIEW,res,that.Papers,that.Printer,that.intOrient)
							that.$refs.printSelect.close()
						}
					);
					
					
					
					
					
				}else{
					
					
					that.$common.get_request(
						{
							type:'order_print_send',
							json_data:that.print_data,
							print_type:that.print_type.now_id,
							print_mode:that.print_mode.now_id,
							voice:that.print_voice_checked==true ? 1:0
						},
						(res)=>{
							that.$refs.printSelect.close()
						}
					);
				}
				
			},
		}
	}
</script>

<style>
	@import "/static/css/print.css";
	.bib{
		height: calc(100% - 46px);
		overflow: hidden;
		background: #fff;
		margin: 10px;
		padding: 10px;
		border-radius: 10px;
	}
	.width100{
		display: flex;
		justify-content: center;
		/* height: 104px; */
		margin: auto;
		padding: 15px;
	}
	.print-box{
		margin: auto;
		width: 100%;
	}
	.tipscom{
		text-align: left;
		padding:  15px;
		font-size: 12px;
	}
	.gys{
		margin-left: 0px;
		padding: 0px 5px;
		background-color: #f5f7fa;
		border-top: 1px solid #d2d2d2;
		border-bottom: 1px solid #d2d2d2;
		border-left: 1px solid #d2d2d2;
		height: 30px;
		flex: 1;
		margin-top: auto;
		margin-bottom: auto;
		width: auto;
	}
	.updateBut{
		margin: auto;
		background-color: #0f66e0;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 32px;
		padding: 0px 5px;
		min-width: 55px;
		cursor: pointer;
		font-weight: 600;
		flex: 2;
	}
	.cic{
		    padding: 15px;
			display: flex;
			gap: 10px;
			width: 530px;
	}
	.ciq{
		    display: flex;
		    width: auto;
		    flex-direction: column;
	}
	.bu{
		background-color: #009434;
		color: #fff;
		font-weight: 400;
		justify-content: center;
		display: flex;
		height: 50px;
		flex-direction: column;
		justify-content: center;
	}
</style>
